import type { ReactNode, CSSProperties } from 'react';

/**
 * 通用组件 Props 基础接口
 * @description 所有组件都应该继承的基础属性
 */
export interface IBaseComponentProps {
  /** 自定义样式类名 */
  className?: string;
  /** 自定义内联样式 */
  style?: CSSProperties;
  /** 组件ID */
  id?: string;
  /** 测试ID */
  testId?: string;
  /** 是否禁用 */
  disabled?: boolean;
  /** 是否加载中 */
  loading?: boolean;
  /** 子元素 */
  children?: ReactNode;
}

/**
 * 表单组件 Props 基础接口
 * @description 表单相关组件的基础属性
 */
export interface IBaseFormComponentProps extends IBaseComponentProps {
  /** 表单项名称 */
  name?: string;
  /** 表单项值 */
  value?: unknown;
  /** 默认值 */
  defaultValue?: unknown;
  /** 是否必填 */
  required?: boolean;
  /** 占位符 */
  placeholder?: string;
  /** 值变化回调 */
  onChange?: (value: unknown) => void;
  /** 失焦回调 */
  onBlur?: () => void;
  /** 聚焦回调 */
  onFocus?: () => void;
  /** 验证状态 */
  validateStatus?: 'success' | 'warning' | 'error' | 'validating';
  /** 帮助文本 */
  help?: string;
  /** 错误信息 */
  error?: string;
}

/**
 * 列表组件 Props 基础接口
 * @description 列表相关组件的基础属性
 */
export interface IBaseListComponentProps<T = unknown> extends IBaseComponentProps {
  /** 数据源 */
  dataSource: T[];
  /** 是否为空 */
  empty?: boolean;
  /** 空状态文本 */
  emptyText?: string;
  /** 空状态图标 */
  emptyIcon?: ReactNode;
  /** 行键 */
  rowKey?: string | ((record: T) => string);
  /** 行点击回调 */
  onRowClick?: (record: T, index: number) => void;
  /** 行双击回调 */
  onRowDoubleClick?: (record: T, index: number) => void;
}

/**
 * 模态框组件 Props 基础接口
 * @description 模态框相关组件的基础属性
 */
export interface IBaseModalComponentProps extends IBaseComponentProps {
  /** 是否显示 */
  visible: boolean;
  /** 标题 */
  title?: string;
  /** 宽度 */
  width?: number | string;
  /** 是否可通过点击遮罩关闭 */
  maskClosable?: boolean;
  /** 是否显示关闭按钮 */
  closable?: boolean;
  /** 确认按钮文本 */
  okText?: string;
  /** 取消按钮文本 */
  cancelText?: string;
  /** 确认按钮类型 */
  okType?: 'default' | 'primary' | 'danger';
  /** 是否显示确认按钮 */
  showOkButton?: boolean;
  /** 是否显示取消按钮 */
  showCancelButton?: boolean;
  /** 确认回调 */
  onOk?: () => void | Promise<void>;
  /** 取消回调 */
  onCancel?: () => void;
  /** 关闭回调 */
  onClose?: () => void;
}

/**
 * 卡片组件 Props 基础接口
 * @description 卡片相关组件的基础属性
 */
export interface IBaseCardComponentProps extends IBaseComponentProps {
  /** 卡片标题 */
  title?: ReactNode;
  /** 卡片额外内容 */
  extra?: ReactNode;
  /** 是否有边框 */
  bordered?: boolean;
  /** 是否可悬停 */
  hoverable?: boolean;
  /** 卡片大小 */
  size?: 'default' | 'small';
  /** 卡片类型 */
  type?: 'default' | 'inner';
  /** 头部样式 */
  headStyle?: CSSProperties;
  /** 内容样式 */
  bodyStyle?: CSSProperties;
}

/**
 * 按钮组件 Props 基础接口
 * @description 按钮相关组件的基础属性
 */
export interface IBaseButtonComponentProps extends IBaseComponentProps {
  /** 按钮类型 */
  type?: 'default' | 'primary' | 'dashed' | 'text' | 'link';
  /** 按钮大小 */
  size?: 'large' | 'middle' | 'small';
  /** 按钮形状 */
  shape?: 'default' | 'circle' | 'round';
  /** 按钮图标 */
  icon?: ReactNode;
  /** 是否危险按钮 */
  danger?: boolean;
  /** 是否幽灵按钮 */
  ghost?: boolean;
  /** 是否块级按钮 */
  block?: boolean;
  /** HTML 类型 */
  htmlType?: 'button' | 'submit' | 'reset';
  /** 点击回调 */
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
}

/**
 * 输入框组件 Props 基础接口
 * @description 输入框相关组件的基础属性
 */
export interface IBaseInputComponentProps extends IBaseFormComponentProps {
  /** 输入框类型 */
  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
  /** 输入框大小 */
  size?: 'large' | 'middle' | 'small';
  /** 最大长度 */
  maxLength?: number;
  /** 是否显示字数统计 */
  showCount?: boolean;
  /** 是否允许清除 */
  allowClear?: boolean;
  /** 前缀图标 */
  prefix?: ReactNode;
  /** 后缀图标 */
  suffix?: ReactNode;
  /** 前置标签 */
  addonBefore?: ReactNode;
  /** 后置标签 */
  addonAfter?: ReactNode;
  /** 按下回车回调 */
  onPressEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
}

/**
 * 选择器组件 Props 基础接口
 * @description 选择器相关组件的基础属性
 */
export interface IBaseSelectorComponentProps<T = unknown> extends IBaseFormComponentProps {
  /** 选项列表 */
  options: Array<{
    label: string;
    value: T;
    disabled?: boolean;
    children?: ReactNode;
  }>;
  /** 是否多选 */
  multiple?: boolean;
  /** 是否可搜索 */
  showSearch?: boolean;
  /** 是否允许清除 */
  allowClear?: boolean;
  /** 下拉框最大高度 */
  listHeight?: number;
  /** 最多显示多少个选中项 */
  maxTagCount?: number;
  /** 搜索回调 */
  onSearch?: (value: string) => void;
  /** 下拉框显示状态变化回调 */
  onDropdownVisibleChange?: (open: boolean) => void;
}